<section class="find-rule">
  <nz-card style="margin-bottom: 10px;font-size: 16px; border-radius: 20px" [nzTitle]="titleTemplate">
    <ng-container *ngFor="let condition of conditions; let key=index; let first=first; let last=last; trackBy: trackByFunction">
      <app-rule
        [condition]="condition"
        [isFirst]="first"
        [isLast]="last"
        [segmentList]="segmentList"
        [userProps]="userProps"
        (addProperty)="onAddProperty($event)"
        (addRule)="onAddRule()"
        (deleteRule)="onDeleteRuleItem(key)"
        (ruleChange)="onRuleChange($event, key)">
      </app-rule>
    </ng-container>
    <ng-container *ngIf="variationOptions.length > 0">
      <app-serve
        [dispatchKey]="dispatchKey"
        [userProps]="userProps"
        (onDispatchKeyChange)="dispatchKeyChange($event)"
        [variationOptions]="variationOptions"
        [ruleVariations]="variations"
        (onPercentageChange)="onServeChange.next($event)">
      </app-serve>
    </ng-container>
  </nz-card>

  <ng-template #titleTemplate>
    <div style="display:flex;justify-content: flex-start;">
      <input type="text" class="standard-bordered-input" nz-input style="width: 500px;height: 36px;" [(ngModel)]="name" (ngModelChange)="onRuleNameChange()" />
      <div class="rule-title" style="margin-left: 12px;">
        <i nz-icon
          i18n-nz-popconfirm="@@common.remove-rule-confirm"
          nz-popconfirm="Are you sure to remove the rule?"
          nzType="icons:icon-delete"
          nzPopconfirmPlacement="bottomRight"
          [nzPopconfirmOverlayStyle]="{minWidth: '240px'}"
          (nzOnConfirm)="onDeleteRule()"></i>
      </div>
    </div>
  </ng-template>
</section>
